<template>
  <div class="box">
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div>报价中心</div>
      </el-col>
      <el-col :span="4">
        <div>
          <el-select
            v-model="region"
            placeholder="新增中转费费报价"
            @change="selectChanged"
            style="width: 180px; background: #9999"
          >
            <el-option label="新增中转费费报价" value="1"></el-option>
            <el-option label="新增包仓费报价" value="2"></el-option>
            <el-option label="新增派费报价" value="3"></el-option>
            <el-option label="加收费报价" value="4"></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      :title="title"
      size="80%"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <!-- 新增中转费报价 -->
      <div style="height: 100%" v-if="show == 1">
        <span class="title"> 基础信息配置 </span>
        <div class="line"></div>
        <el-col class="drawer">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            label-width="100px"
            class="flex"
            size="mini"
            id="selectForm"
          >
            <el-form-item label="使用网点">
              <el-select
                v-model="ruleForm.region"
                placeholder="报价名称"
                style="width: 286px"
              >
                <el-option
                  v-for="item in networkList"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生效时间段">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-col>
              <el-form-item label="特殊资源">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="高"></el-radio>
                  <el-radio label="次高"></el-radio>
                  <el-radio label="中"></el-radio>
                  <el-radio label="低"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="运输方式">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="全部"></el-radio>
                  <el-radio label="汽运"></el-radio>
                  <el-radio label="航空"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="物品类别">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="全部"></el-radio>
                  <el-radio label="货样"></el-radio>
                  <el-radio label="非货样"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="面单类别">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="全部"></el-radio>
                  <el-radio label="传统面单"></el-radio>
                  <el-radio label="电子面单"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="面单类型" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                  <el-checkbox label="全部" name="type"></el-checkbox>
                  <el-checkbox label="菜鸟" name="type"></el-checkbox>
                  <el-checkbox label="京东" name="type"></el-checkbox>
                  <el-checkbox label="拼多多" name="type"></el-checkbox>
                  <el-checkbox label="字节跳动" name="type"></el-checkbox>
                  <el-checkbox label="丰巢" name="type"></el-checkbox>
                  <el-checkbox label="快宝" name="type"></el-checkbox>
                  <el-checkbox label="其他" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col>
              <span class="title1"> 基础信息配置 </span>
              <div class="line1"></div>
            </el-col>
            <div class="titleBox">
              <div class="left">
                <ul class="first">
                  <li v-for="(item, index) in li" :key="index">
                    {{ item }}
                  </li>
                </ul>
              </div>
              <div class="right">
                <ul class="first">
                  <li v-for="(item, index) in ol" :key="index">
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
            <el-col style="display: flex">
              <el-form-item label="价格模式">
                <el-select
                  v-model="ruleForm.region"
                  placeholder="报价名称"
                  style="width: 200px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="报价模式">
                <el-select
                  v-model="ruleForm.region"
                  placeholder="报价名称"
                  style="width: 200px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="含面单费">
                <el-select
                  v-model="ruleForm.region"
                  placeholder="报价名称"
                  style="width: 200px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col style="padding-left: 50px" class="drawer">
            <el-button type="primary" @click="openDialogVisible"
              >添加区域</el-button
            >
            <el-table
              :data="drawerTableData"
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ textAlign: 'center' }"
              border
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column prop="userName" label="区域备注">
              </el-table-column>
              <el-table-column prop="name" label="目的地"> </el-table-column>
              <el-table-column prop="amount1" label="起始重量(﹥0，包含0)">
              </el-table-column>
              <el-table-column prop="amount2" label="结束重量(≤0)">
              </el-table-column>
              <el-table-column prop="amount3" label="价格/公式">
              </el-table-column>
              <el-table-column prop="amount3" label="最低价格">
              </el-table-column>
              <el-table-column prop="amount3" label="重量模式">
              </el-table-column>
              <el-table-column prop="amount3" label="进位参数">
              </el-table-column>
              <el-table-column prop="amount3" label="舍位值"> </el-table-column>
              <el-table-column prop="amount3" label="进位值"> </el-table-column>
              <el-table-column prop="amount3" label="附加费"> </el-table-column>
              <el-table-column prop="amount3" label="操作"> </el-table-column>
            </el-table>
          </el-col>
        </el-col>
      </div>

      <!-- 新增包仓费报价 -->
      <div style="height: 100%" v-if="show == 2">
        <span class="title"> 基础信息配置 </span>
        <div class="line"></div>
        <el-col class="drawer">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            label-width="100px"
            class="flex"
            size="big"
            id="selectForm"
          >
            <el-form-item label="报价名称">
              <el-select
                v-model="ruleForm.region"
                placeholder="最多输入20个字符"
                style="width: 286px"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生效时间段">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-col style="display: flex">
              <el-form-item label="收付类型">
                <el-select
                  v-model="ruleForm.region"
                  placeholder="报价名称"
                  style="width: 200px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="结算科目">
                <el-select
                  v-model="ruleForm.region"
                  placeholder="报价名称"
                  style="width: 200px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="科目">
                <el-select
                  v-model="ruleForm.region"
                  placeholder="报价名称"
                  style="width: 200px"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <span class="title1">
                价格配置
                <span style="color: red; font-size: 9px"
                  >温馨提示: 开通预付款的账户将直接对接预付款扣款</span
                >
              </span>
              <div class="line1"></div>
            </el-col>
            <el-col>
              <el-form-item label="金额" style="width: 300px">
                <el-input
                  v-model="ruleForm.region"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>

              <el-form-item label="备注" style="width: 300px">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <el-row>
            <el-col :span="6" :offset="18"
              ><el-button type="primary">取消</el-button>
              <el-button type="success">生成报价</el-button></el-col
            >
          </el-row>
        </el-col>
      </div>

      <!-- 新增派费报价 -->
      <div style="height: 100%" v-if="show == 3">
        <span class="title"> 基础信息配置 </span>
        <div class="line"></div>
        <el-col class="drawer">
          <el-form
            ref="PfForm"
            :model="PfForm"
            label-width="100px"
            class="flex"
            size="big"
            id="selectForm"
          >
            <el-form-item label="报价名称">
              <el-select
                v-model="PfForm.region"
                placeholder="最多输入20个字符"
                style="width: 286px"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生效时间段">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-col>
              <span class="title1"> 价格配置 </span>
              <div class="line1"></div>
            </el-col>
            <el-col>
              <el-button
                type="success"
                @click="addPfQj"
                style="margin-left: 30px"
                >添加区间</el-button
              >

              <el-form-item label="基本派费" style="width: 900px">
                <el-table
                  :data="PftableData"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{ textAlign: 'center' }"
                  style="width: 100%"
                >
                  <el-table-column
                    prop="date"
                    label="起始价格(＞0)"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <el-input-number
                        size="mini"
                        v-model="scope.row.date"
                        :min="1"
                        :max="10"
                        label="描述文字"
                      ></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="结束价格(≤)" width="180">
                    <template slot-scope="scope">
                      <el-input-number
                        size="mini"
                        v-model="scope.row.date"
                        :min="1"
                        :max="10"
                        label="描述文字"
                      ></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column align="right" width="300">
                    <template slot="header">
                      <el-radio-group v-model="radio" @change="agreeChange">
                        <el-radio label="1" border>百分比</el-radio>
                        <el-radio label="2" border>单价</el-radio>
                      </el-radio-group>
                    </template>
                    <template slot-scope="scope">
                      <el-input-number
                        size="mini"
                        v-model="scope.row.date"
                        :min="1"
                        :max="10"
                        label="描述文字"
                      ></el-input-number>
                    </template>
                  </el-table-column>

                  <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="
                          deleteRow(scope.$index, PftableData)
                        "
                        type="text"
                        size="small"
                      >
                        移除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>

            <el-col>
              <el-form-item label="加收费" style="width: 286px">
                <el-radio v-model="radio" label="1">百分比</el-radio>
                <el-radio v-model="radio" label="2">单价</el-radio>
              </el-form-item>

              <el-form-item label="备注" style="width: 300px">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>

          <el-row>
            <el-col :span="6" :offset="18"
              ><el-button type="primary">取消</el-button>
              <el-button type="success">生成报价</el-button></el-col
            >
          </el-row>
        </el-col>
      </div>
    </el-drawer>

    <!-- 新增中转费报价 -->
    <el-dialog
      title="提示"
      :visible.sync="zzfDialogVisible"
      width="30%"
      :before-close="zzfhandleClose"
    >
      <el-form ref="zzfForm" :model="zzfForm" label-width="80px">
        <el-form-item label="目的地">
          <el-input v-model="zzfForm.name"></el-input>
        </el-form-item>
        <el-form-item label="起始重量(>0,包含0)">
          <el-input-number
            v-model="zzfForm.startNum"
            :min="0"
            :max="999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="结束重量(≤0)">
          <el-input-number
            v-model="zzfForm.endNum"
            :min="0"
            :max="999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="加收费">
          <el-input v-model="zzfForm.name"></el-input>
        </el-form-item>
        <el-form-item label="重量模式">
          <el-select v-model="zzfForm.region" placeholder="请选择活动区域">
            <el-option label="实际重量" value="实际重量"></el-option>
            <el-option label="四舍五入" value="四舍五入"></el-option>
            <el-option label="0.5进位" value="0.5进位"></el-option>
            <el-option label="进位舍位" value="进位舍位"></el-option>
            <el-option label="向上取整" value="向上取整"></el-option>
            <el-option label="分段进位" value="分段进位"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="进位参数">
          <el-input-number
            v-model="zzfForm.endNum"
            :min="0"
            :max="999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="舍位值">
          <el-input-number
            v-model="zzfForm.endNum"
            :min="0"
            :max="999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="进位值">
          <el-input-number
            v-model="zzfForm.endNum"
            :min="0"
            :max="999"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="附加费">
          <el-input-number
            v-model="zzfForm.endNum"
            :min="0"
            :max="999"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="zzfDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="zzfDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="QbForm"
            :model="QbForm"
            label-width="100px"
            class="flex"
          >
            <el-form-item label="使用网点">
              <el-select
                v-model="QbForm.networkNameId"
                placeholder="请选择活动区域"
                style="width: 286px"
              >
                <el-option
                  v-for="item in networkList"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报价名称">
              <el-input
                v-model="QbForm.name"
                placeholder="请输入报价名称"
                style="width: 286px"
              ></el-input>
            </el-form-item>
            <el-form-item label="报价编号">
              <el-input
                v-model="QbForm.quotationCode"
                placeholder="请输入报价编号"
                style="width: 286px"
              ></el-input>
            </el-form-item>
            <el-form-item label="报价类型">
              <el-select
                v-model="QbForm.quotationTypeId"
                placeholder="请选择报价类型"
                style="width: 286px"
              >
                <el-option
                  v-for="item in SelectQuotationAll"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="clear">重置</el-button>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select
                v-model="QbForm.auditStatus"
                placeholder="请选择审核状态"
                style="width: 286px"
              >
                <el-option label="待审核" value="待审核"></el-option>
                <el-option label="审核通过" value="审核通过"></el-option>
                <el-option label="驳回" value="驳回"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="优先级">
              <el-select
                v-model="QbForm.priority"
                placeholder="请选择优先级"
                style="width: 286px"
              >
                <el-option label="高" value="高"></el-option>
                <el-option label="次高" value="次高"></el-option>
                <el-option label="中" value="中"></el-option>
                <el-option label="低" value="低"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="QbhandleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                  label="序号"
                  type="index"
                  width="120"
                ></el-table-column>
                <el-table-column prop="name" label="报价名称" width="120">
                </el-table-column>
                <el-table-column
                  prop="auditStatus"
                  label="审核状态"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="quotationCode"
                  label="报价编号"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="quotationType.title"
                  label="报价类型"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="quotationNumber"
                  label="归届结算关系数量"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="type" label="使用状态" width="120">
                </el-table-column>
                <el-table-column prop="priority" label="优先级" width="120">
                </el-table-column>
                <el-table-column
                  prop="normalTime"
                  label="生效时间段"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="createBy" label="创建人" width="120">
                </el-table-column>
                <el-table-column prop="updateTime" label="修改时间" width="120">
                </el-table-column>
                <el-table-column label="操作" width="120">
                  <template slot-scope="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >复制</el-button
                    >
                    <el-button type="text" size="small">作废</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="QbhandleSizeChange"
            @current-change="QbhandleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="QbTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="使用中" name="second">
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="所属网点" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="配置名称"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="name" label="导出类型" width="120">
                </el-table-column>
                <el-table-column prop="name" label="导出对象名称" width="120">
                </el-table-column>
                <el-table-column prop="name" label="自动导出日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="创建日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="操作" width="120">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="未启用" name="third">
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="所属网点" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="配置名称"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="name" label="导出类型" width="120">
                </el-table-column>
                <el-table-column prop="name" label="导出对象名称" width="120">
                </el-table-column>
                <el-table-column prop="name" label="自动导出日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="创建日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="操作" width="120">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已过期" name="fourth">
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="所属网点" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="配置名称"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="name" label="导出类型" width="120">
                </el-table-column>
                <el-table-column prop="name" label="导出对象名称" width="120">
                </el-table-column>
                <el-table-column prop="name" label="自动导出日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="创建日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="操作" width="120">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已失效" name="fifth">
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="name" label="所属网点" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="配置名称"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="name" label="导出类型" width="120">
                </el-table-column>
                <el-table-column prop="name" label="导出对象名称" width="120">
                </el-table-column>
                <el-table-column prop="name" label="自动导出日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="创建日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="操作" width="120">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getOutletsList,
  QuotationSearch,
  getSelectQuotationAll,
} from "@/api/dashboard";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      title: "新增中转费报价",
      zzfDialogVisible: false,
      region: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        currentPage4: 4,
        desc: "",
      },
      PfForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        currentPage4: 4,
        desc: "",
      },
      zzfForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        currentPage4: 4,
        desc: "",
        startNum: 0,
        endNum: 999,
      },
      show: 1,
      QbPages: {
        pageNum: 1,
        pageSize: 10,
      },
      QbTotal: 0,
      drawerTableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
          userName: "上海",
        },
      ],
      li: [
        "实际重量：结算时按实际重量计算",
        "0.5进位: 30.5取值0.5，>0.5取值为1",
        "四舍五入: <0.5舍去，20.5取值为1",
        "向上取整: 有小数位都向上取整进一位",
        "分段进位(2.8进位) :",
        "0.5进位: 30.5取值0.5，>0.5取值为1,≤舍位值，舍去",
        ">舍位值，s进位值，取0.5",
        ">进位值，取1",
        "进位舍位:",
        "只填舍位值: ≤舍位值，直接舍去；>舍位进1",
        "只填进位值: 2进位值，直接进1，<进位直接舍去",
        "舍位进位都填:",
        "≤舍位值，直接舍去",
        ">舍位值、S进位值: 取进位值结算",
        ">进位值: 直接进1位",
      ],
      ol: [
        "应用示例：",
        "1、某网点重量: 重量不足1KG按1KG计算",
        "重量模式: 选择向上取整 2、某网点重量: 不足0.5按0.5计算 (半个续重模",
        "2、某网点重量:不足0.5 按 0.5 计算(半个续重模式)",
        "重量模式:选择0.5进位",
        "3、某网点重量:小于0.2的舍去，0.2和07之间的按 0.5计算",
        "0.7 以上取1",
        "重量模式:分段进位，舍位 :0.2，进位:0.7",
        "4、某网点重量:小于0.3的舍去，03 和08之间的按0.8 计算,",
        ").8 以上取1",
        "重量模式:进位舍位，舍位:0.3，进位0.8",
      ],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      activeName: "first",
      radio: "1",
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      PftableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      QbForm: {
        auditStatus: "",
        name: "",
        networkNameId: "",
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
        priority: "",
        quotationCode: "",
        quotationTypeId: '',
        status: 1,
      },
      // 网点列表
      networkList: [],
      // 报价类型
      SelectQuotationAll: [],
    };
  },
  created() {
    this.getOutLet();
    this.getSelectQuotation();
    this.getList();
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code == 200) {
          this.networkList = res.data;
        }
      });
    },

    // 获取报价类型列表
    getSelectQuotation() {
      getSelectQuotationAll().then((res) => {
        if (res.code == 200) {
          this.SelectQuotationAll = res.data;
        }
      });
    },
    // 显示报价中心表格数据
    getList() {
       for (const key in this.QbForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.QbForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.QbForm[key];
        }
      }
      QuotationSearch(this.QbForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.QbTotal = res.data.total;
          this.QbForm.pageDate.pageSize = res.data.pages;
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 0) {
        this.QbForm.status = 1
      } else if (tab.index == 1) {
        this.QbForm.status = 2
      } else if (tab.index == 2) {
        this.QbForm.status = 3
      } else if (tab.index == 3) {
        this.QbForm.status = 4
      } else if (tab.index == 4) {
        this.QbForm.status = 5
      } 
      this.getList()
    },
    // 搜索
    search(){
      this.getList()
    },

    handleClose(done) {
      done();
    },

    //新增中转费弹窗关闭
    zzfhandleClose(done) {
      done();
    },
    // 打开新增中转费弹窗
    openDialogVisible() {
      this.zzfDialogVisible = true;
    },

    // 选择抽屉
    selectChanged(val) {
      console.log(val);
      if (val == 1) {
        this.title = "新增中转费报价";
        this.show = 1;
      } else if (val == 2) {
        this.title = "新增包仓费报价";
        this.show = 2;
      } else if (val == 3) {
        this.title = "新增派费报价";
        this.show = 3;
      }
      this.drawer = true;
    },

    // 添加派费区间
    addPfQj() {
      this.PftableData.push({ date: "" });
    },
    // 移除
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 全部分页
    QbhandleSizeChange(val) {
      this.QbForm.pageDate.pageSize = val;
      this.getList();

      console.log(`每页 ${val} 条`);
    },
    QbhandleCurrentChange(val) {
      this.QbForm.pageDate.pageNum = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
    QbhandleSelectionChange(val) {
      // this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
#selectForm {
  padding: 0px 20px;
}
.title {
  padding: 20px 50px;
}
.line {
  background: #9999;
  height: 1px;
  margin: 8px 50px;
}
.title1 {
  padding: 20px 30px;
}
.line1 {
  background: #9999;
  height: 1px;
  margin: 8px 30px;
}
.titleBox {
  display: flex;
}
.left {
  .first li {
    color: #9999;
    font-size: 14px;
  }
}
.right {
  .first li {
    list-style: none;
    color: #9999;
    font-size: 14px;
  }
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}
.drawer {
  height: 100%;
  overflow: auto;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
